<template>
	<view class="box">
		<UserInfo2 :userinfo="userinfo"></UserInfo2>
		<view class="recommend">{{recommendShow}}</view>
		<view class="original">3篇原创内容</view>
		<view class="video">视频号:MasterGo产品设计工具</view>
		<view class="attention">3个位朋友关注</view>
		<view class="buttons">
			<button v-show="isClick" class="isClick" @click="doAttention">{{attention}}</button>
			<button v-show="isClick" >发消息</button>
		</view>
		<view @click="undoAttention" v-show="!isClick" class="button-attention">
			<button>去关注</button>
		</view>
		<Attentions>
		</Attentions>
	</view>
</template>

<script setup>
	import { computed,ref } from 'vue';
	const userinfo = {
		icon:"../../static/mastergo.jpg",
		name:"MaxtGo产品设计工具",
		firm:"北京尽微致广信息技术有限公司",
		spot:"北京"
	}
	
	const recommend = "罗永浩推荐的设计工具，互联网大厂都在用！助力产设研团队协同提效，释放更大价值，一起创造更好的用户体验。马上关注，看团队的提效故事。"
	const recommendShow = computed(()=>{
		if(recommend.length>=46){
			return recommend.substring(0,46) + " ... >"
		}else{
			return recommend;
		}
		
	})
	
	const attention = computed(()=>{
		if(isClick.value == true){
			return "已关注公众号";
		}else{
			return "关注"
		}
	})
	const isClick = ref(true)
	function doAttention(){
		isClick.value = false
	}
	function undoAttention(){
		isClick.value = true
	}
	
	
</script>
	

<style lang="scss" scoped>
	.box{
		
		.recommend{
			margin: 30rpx;
		}
		.original{
			margin: 30rpx;
			color: #999;
		}
		.video{
			margin: 30rpx;
			font-size: 30rpx;
		}
		.attention{
			margin: 30rpx;
			font-size: 30rpx;
		}
		.buttons{
			display: flex;
			margin-right: 40rpx;
			button{
				flex: 1;
				// justify-content: center; /* 水平居中 */
				// align-items: center; /* 垂直居中 */
				text-align: center;
				line-height: 70rpx; /* 按钮的高度减去5像素 */
				margin-left: 40rpx;
				margin-right: 10rpx;
				width: 300rpx;
				height: 76rpx;
			}
		}
		.button-attention{
			button{
				height: 76rpx;
				width: 660rpx;
				background-color: #00BB29;
				font-weight: 500;
				line-height: 70rpx; /* 按钮的高度减去5像素 */
			}
		}
		
		.isClick{
			color: #999;
		}
		
		
	}

</style>
